<template>
  <!-- 子平台系统 -->
  <div>
    <div  class="subplatform-pane">
      <div class="subplatform-box" >
        <!-- <el-row :gutter="20" > -->
          <!-- <el-col :span="6" v-for="(item,index) in platformDataList"> -->
            <div :class="check_platform == item.platform ? 'name-pane active-border-color' : 'name-pane'" @click="checkSubplatform(item)" v-for="(item,index) in platformDataList">
              <div class="bg-img" :style="{'background-image': `url(${item.icon_bg})` , right: item.platform == 'business_pc' ? '-50px' : '-34px'}"></div>
              <img :src="item.icon" alt="" class="icon-img">
              <div class="name" >{{item.platform_name}}</div>
              <div class="tip-name">{{item.name}}</div>
              <el-button type="primary" size="small" class="btn-style"  @click.stop="openBackstageVisible(item)">进入</el-button>
            </div>
          <!-- </el-col>
        </el-row> -->
      </div>
    </div>
    <el-dialog title="选择后台" :visible.sync="backstageVisible" width="850px" center :show-close="false">
      <div class="backstage-pane">
        <div class="backstage-box" v-for="(item,index) in morePlatformDataList" :key="index" @click="getOnePlatform(item.uid)">
          <div class="left">
            <div class="account-number">账号: {{item.name}}</div>
            <div class="regional-agent">{{item.desc}}</div>
          </div>
          <div class="right">
            <el-button type="primary" class="btn-style" >进入</el-button>
          </div>
        </div>
        <i class="el-icon-circle-close" @click="backstageVisible = false"></i>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import Vue from 'vue';
  import { Button  , Row , Col , Message ,  Dialog} from "element-ui";
  Vue.use(Button).use(Row).use(Col).use(Dialog);
  import http from './js/http.js';

  import cMenu from './components/menu';
  import cNavbar from './components/navbar';
  Vue.prototype.$message = Message;
  export default {
    components: { cMenu , cNavbar},
    data() {
      return {
        backstageVisible: false,
        platformDataList: [],
        morePlatformDataList: [],
        url: "",
        isCollapse: false,
        platform: "",
        check_platform: ""
      };
    },
    activated() {
      this.platformData();
      this.getGlobalData();
    },
    methods: {
      // 选择后台
      async openBackstageVisible(item) {
        this.check_platform = item.platform;
        this.platform = item.platform;
        if(item.platform_type == 1) {
          this.getOnePlatform('');
        }else if(item.platform_type == 2) {
          this.getMorelatform();
        }
      },
      // 获取平台数据
      async platformData(i) {
        let {data,result,msg} =  await http.get("plugin.sub-platform.frontend.index.platform",{});
        console.log(data,result,msg,'data,result,msgdata,result,msg');
        if(result) {
          if(!data.length) {
            this.$message.error("无平台可登录");
            return
          }
          this.platformDataList = data;
          this.check_platform = data[0].platform;
        }else {
          this.$message.error(msg);
        }
      },
      getGlobalData() {
        http.get("plugin.sub-platform.frontend.setting.index")
          .then(response => {
            if (response.result === 1) {
              this.setIcon(response.data.pc_favorite_icon_url)
            }
          })
          .catch(error => {
            console.log(error);
          });
      },
      setIcon(icon){
        var link = document.querySelector("link[rel*='icon']") || document.createElement('link');
        link.type = 'image/x-icon';
        link.rel = 'shortcut icon';
        link.href = icon;
        document.getElementsByTagName('head')[0].appendChild(link);
      },
      // 一种身份
      async getOnePlatform(uid) {
        // return
        try {
          let {data,result,msg} =  await http.post("plugin.sub-platform.frontend.login.login-platform",{platform: this.platform,uid});
          if(result) {
            window.open(data.redirect_url,'_blank');
          }else {
            this.$message.error(msg);
          }
        } catch ({data,result,msg}) {
          this.$message.error(msg);
        }
      },
      // 多种身份
      async getMorelatform() {
        try {
          let {data,result,msg} =  await http.post("plugin.sub-platform.frontend.index.platform-identities",{platform:this.platform});
          if(result) {
            this.morePlatformDataList = data;
            this.backstageVisible = true;
          }else {
            this.$message.error(msg);
          }
        } catch ({data,result,msg}) {
          this.$message.error(msg);
        }
      },
      // 切换平台
      checkSubplatform(item) {
        this.check_platform = item.platform;
      }
    }
  };
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
::v-deep .el-dialog__body {
  height: 500px;
  overflow: auto;
}

.subplatform-pane {
  margin: 27px 0 27px 27px;

  .subplatform-box {
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    // justify-content: space-between;
    .active-border-color {
      border: 2px solid #29ba9c;
    }

    .name-pane {
      height: 240px;
      width: 260px;
      background: #fff;
      border-radius: 20px;
      padding: 12px 0 25px 0;
      margin: 0 24px 29px 0;
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
      overflow: hidden;

      .bg-img {
        height: 143px;
        width: 168px;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        // right: -34px;
        top: -18px;
        z-index: -1;
      }

      .icon-img {
        width: 100px;
        height: 100px;
        margin: 0;
      }

      .name {
        font-size: 20px;
        font-weight: bold;
        color: #353535;
        // margin-bottom: 12px;
        line-height: 1;
      }

      .tip-name {
        font-size: 14px;
        font-weight: 400;
        color: #999;
        margin-bottom: 5px;
      }

      .el-button {
        // margin-top: 15px;
      }
    }
  }
}

.backstage-pane {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

  .backstage-box {
    background: #f5f5f5;
    border-radius: 4px;
    width: 48%;
    // height: 105px;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;

    .left {
      margin-right: 20px;

      .account-number {
        margin-bottom: 10px;
        font-size: 18px;
        font-weight: 400;
        color: #333;
      }

      .regional-agent {
        font-size: 16px;
        font-weight: 400;
        color: #333;
        line-height: 24px;
      }
    }
    .right {}
  }

  .el-icon-circle-close {
    color: white;
    font-size: 36px;
    position: absolute;
    bottom: -100px;
    left: 425px;
  }
}

.btn-style {
  width: 88px;
  background-color: #29ba9c !important;
  border-color: #29ba9c !important;
}
</style>
